<template>
  <div>
    <el-row class="demo-autocomplete">
      <el-col :span="6">
        <el-input
            class="inline-input"
            v-model="user_name"
            placeholder="请输User用户名"
            @keydown.enter.native="searchUser(pageNum,user_name,user_vip,user_state)"
        >
          <el-button slot="append" icon="el-icon-search"
                     @click="searchUser(pageNum,user_name,user_vip,user_state)"></el-button>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="user_vip" clearable placeholder="请选择">
          <el-option
              v-for="item in userVipOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="user_state" clearable placeholder="请选择">
          <el-option
              v-for="item in userStateOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>

    </el-row>

    <el-table
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        :data="items"
        style="width: 100%"
        highlight-current-row
        height="600">
      <el-table-column
          fixed
          label="用户uid"
          width="200">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.user_uid }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="用户名"
          width="200">
        <template slot-scope="scope">

          <span style="margin-left: 10px"><el-tag size="medium">{{ scope.row.user_name }}</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
          label="用户等级"
          width="200">
        <template slot-scope="scope">
          <i class="el-icon-trophy"></i>
          <span style="margin-left: 10px">{{ scope.row.user_vip }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="用户状态"
          width="200">
        <template slot-scope="scope">
          <i class="el-icon-magic-stick"></i>
          <span style="margin-left: 10px">{{ scope.row.user_state }}</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">

        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="updateDialogOpen(
                  scope.row.user_uid,
                  scope.row.user_name,
                  scope.row.user_pwd,
                  scope.row.user_vip,
                  scope.row.user_state,
              );">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteUser(scope.row.user_uid)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>

    <!--修改页面-->
    <el-dialog
        title="修改用户信息"
        :visible.sync="updateDialogVisible"
        width="50%"
        center>
      <el-row>
        <el-col :span="16" :offset='4'>
          <el-form status-icon="form" :model="form" label-width="80px" hide-required-asterisk>
            <el-form-item label="用户昵称">
              <el-input v-model="form.user_name"></el-input>
            </el-form-item>
            <el-form-item label="用户等级">
              <el-select v-model="form.user_vip" clearable placeholder="请选择">
                <el-option
                    v-for="item in userVipOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户状态">
              <el-select v-model="form.user_state" clearable placeholder="请选择">
                <el-option
                    v-for="item in userStateOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "VideoTab",


  data() {
    return {

      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,
      items: [],

      pageNum: 1,
      pageSize: 1,
      pageTotal: 1,
      total: 1,
      user_name: '',
      user_vip: '',
      user_state: '',

      userVipOption: [{
        value: 'free',
        label: 'free'
      }, {
        value: 'slave',
        label: 'slave'
      }, {
        value: 'master',
        label: 'master'
      }],


      userStateOption: [{
        value: 'normal',
        label: 'normal'
      }, {
        value: 'lock',
        label: 'lock'
      }],

      form: {
        user_uid: '',
        user_name: '',
        user_pwd: '',
        user_vip: '',
        user_state: '',
      },
      updateDialogVisible: false,


    };
  },

  methods: {
    searchUser: function (pageNum, user_name, user_vip, user_state) {
      var that = this;
      this.$http.get("http://" + that.ip + ":" + that.port + "/user/main?pageNum=" + pageNum + "&user_name=" + user_name + "&user_vip=" + user_vip + "&user_state=" + user_state)
          .then(function (response) {
            console.log(response.data.list);
            that.items = response.data.list;
            that.total = response.data.total;
            that.pageNum = response.data.pageNum;
            that.pageSize = response.data.pageSize;
            that.pageTotal = response.data.pageTotal;
          })
          .catch(function (err) {
            console.log(err);
          });

    },

    deleteUser: function (id) {
      var that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$http.get("http://" + that.ip + ":" + that.port + "/user/delete/" + id)
            .then(function (response) {
              console.log(response)
              that.searchUser(that.pageNum, that.user_name, that.user_vip, that.user_state);
            }).catch(function (err) {
          console.log(err)
        });

        this.$message({
          type: 'success',
          message: '删除成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchUser(val, this.user_name, this.user_vip, this.user_state);
    },

    updateDialogOpen(user_uid, user_name, user_pwd, user_vip, user_state) {
      this.updateDialogVisible = true
      this.form.user_uid = user_uid;
      this.form.user_name = user_name;
      this.form.user_pwd = user_pwd;
      this.form.user_vip = user_vip;
      this.form.user_state = user_state;
    },

    updateUser() {
      var that = this;
      this.$http.post("http://" + that.ip + ":" + that.port + "/user/doEdit", that.form)
          .then(function (response) {
            console.log(response);
            that.$message({
              message: "修改成功",
              type: 'success'
            });
            that.searchUser(that.pageNum, that.user_name, that.user_vip, that.user_state);
            that.updateDialogVisible = false;
            that.form.user_uid = '';
            that.form.user_pwd = "";
            that.form.user_name = '';
            that.form.user_vip = '';
            that.form.user_state = '';
          }).catch(function (err) {
        console.log(err);
        that.$message.error(
            '修改失败');
      });
    },
  },
  created() {
    this.searchUser(1, '', '', '');
  },
}
</script>

<style scoped>

</style>